<!doctype html>
<html>
	<head>
		<script type="text/javascript" src="../common/js/iphone/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="item.js"></script>
		<script type="text/javascript" src="hero.js"></script>
		
		<script>
		$(document).ready(function() {
			var battleTag = getParameterByName('battle_tag');
			if(battleTag)
				getProfile(battleTag);			
		});
	
		
		function getProfile(battleTag) {
			$.ajax({
				url: 'account.php',
				data: { 'battle_tag' : battleTag },
				success: function(account) {
					$('#heroes').empty();

					for(var i=0,l=account.heroes.length;i<l;i++) {
						var hero = account.heroes[i];
						var str = '<li id="hero-' + hero.id + '" class="frame" onclick="getHero(\'' + hero.id + '\')"><div class="portrait ' + hero.class + '-' + (hero.gender == 1 ? 'female' : 'male') + '"></div><div class="label">' + hero.level + ' ' + hero.name + '</div></li>';
						$('#heroes').append(str);
					}
					
					if(getParameterByName('battle_tag') != battleTag)
						changeUrl('index.php?battle_tag=' + battleTag);
						
					var hero = getParameterByName('hero');						
						
					if(hero)
						getHero(hero);					
				}
			});
		}		
		
		var hero;		
		function updateHero(type) {				
			if(type == "hero")
			{
				$('#heroes li').each(function() {
					$(this).removeClass('selected');
				});
				$('#heroes li#hero-' + hero.data.id).addClass('selected');
				
				$('#char-sheet').removeClass();
				$('#char-sheet').addClass(hero.data.class + '-' + (hero.data.gender == 1 ? 'female' : 'male'));
			}
			else
			{
				$('#str').html(hero.getTotalAttribute('str'));
				$('#dex').html(hero.getTotalAttribute('dex'));
				$('#int').html(hero.getTotalAttribute('int'));
				$('#vit').html(hero.getTotalAttribute('vit'));
				$('#crit').html(Math.round(hero.getTotalAttribute('crit') * 10000) / 100);
				$('#chd').html(Math.round(hero.getTotalAttribute('chd') * 10000) / 100);
				$('#aspd').html(Math.round(hero.getTotalAttribute('aspd') * 10000) / 100);
				
				if(hero.isDualWield()){
					$('#min').html(Math.round(hero.getTotalAttribute('min_main') * 100) / 100 + '/' + Math.round(hero.getTotalAttribute('min_off') * 100) / 100);
					$('#max').html(Math.round(hero.getTotalAttribute('max_main') * 100) / 100 + '/' + Math.round(hero.getTotalAttribute('max_off') *100) / 100);
				}
				else {
					$('#min').html(hero.getTotalAttribute('min'));
					$('#max').html(hero.getTotalAttribute('max'));
				}
				
				$('#baspd').html(Math.round(hero.getTotalAttribute('baspd') * 100) / 100);
				$('#dps').html(hero.calculateDPS());
			}
			
			//console.log('dps: ' + hero.calculateDPS());
		}		
		
		function getHero(id) {
			var battleTag = getParameterByName('battle_tag');
			
			hero = new Hero(battleTag, id, updateHero);
			
			if(getParameterByName('hero') != id)
				changeUrl('index.php?battle_tag=' + battleTag + '&hero=' + id);	
		}
		
		function setItemIcon(item, slot)  
		{
			$('#' + slot).css('background', 'url("' + item.getIconUrl() + '") center center');
		}
	
		function changeUrl(url) {
			window.history.pushState('', '', url);	
		}
		
		function getParameterByName(name)
		{
			name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
			var regexS = "[\\?&]" + name + "=([^&#]*)";
			var regex = new RegExp(regexS);
			var results = regex.exec(window.location.search);
			if(results == null)
				return "";
			else
				return decodeURIComponent(results[1].replace(/\+/g, " "));
		}
		</script>
		<style>
			body {
				background-color:#000;
				color:#fff;
				padding:0px;
				margin:0px;
				font-family:helvetica;
				font-size:12px;
			}
			
			#heroes {
				list-style-type:none;
				margin:0;
				padding:0;
			}
			
			#heroes .frame {
				background:url('images/frames.png');
				background-repeat:no-repeat;
				height:124px;
				width:97px;
				background-position:0 -124px;
				float:left;
				opacity:.8;
				cursor:pointer;
			}
			
			#heroes .frame:hover {
				background-position:0 -248px;
				opacity:1;
			}
			
			#heroes .frame.selected {
				background-position:0 0px;				
				opacity:1;
			}
			
			#heroes .portrait {
				background:url('images/portraits.jpg');
				width:83px;
				height:66px;
				margin-top:7px;
				margin-left:7px;
			}
			
			#heroes .portrait.barbarian-male {
				background-position:0 0px;
			}
			
			#heroes .portrait.barbarian-female {
				background-position:84px 0px;
			}
			
			#heroes .portrait.demon-hunter-male {
				background-position:0 -66px;
			}
			
			#heroes .portrait.demon-hunter-female {
				background-position:84px -66px;
			}

			#heroes .portrait.monk-male {
				background-position:0 -132px;
			}
			
			#heroes .portrait.monk-female {
				background-position:84px -132px;
			}

			#heroes .portrait.witch-doctor-male {
				background-position:0 -198px;
			}
			
			#heroes .portrait.witch-doctor-female {
				background-position:84px -198px;
			}

			#heroes .portrait.wizard-male {
				background-position:0 -264px;
			}
			
			#heroes .portrait.wizard-female {
				background-position:84px -264px;
			}			
			
			#heroes .frame .label {
				margin-top:5px;
				margin-left:12px;
			}		

			#char-sheet {
				width:994px;
				height:645px;
				clear:both;
				position:relative;
				margin:0 auto;
			}
			
			#char-sheet.barbarian-male {
				background:url('images/barbarian-male.jpg');
			}
			
			#char-sheet.barbarian-female {
				background:url('images/barbarian-female.jpg');
			}
			
			#char-sheet.demon-hunter-male {
				background:url('images/demon-hunter-male.jpg');
			}
			
			#char-sheet.demon-hunter-female {
				background:url('images/demon-hunter-female.jpg');
			}
			
			#char-sheet.monk-male {
				background:url('images/monk-male.jpg');
			}
			
			#char-sheet.monk-female {
				background:url('images/monk-female.jpg');
			}
			
			#char-sheet.witch-doctor-male {
				background:url('images/witch-doctor-male.jpg');
			}
			
			#char-sheet.witch-doctor-female {
				background:url('images/witch-doctor-female.jpg');
			}
			
			#char-sheet.wizard-male {
				background:url('images/wizard-male.jpg');
			}

			#char-sheet.wizard-female {
				background:url('images/wizard-female.jpg');
			}
			
			#char-sheet #head {
				position:absolute;
				top:161px;
				left:597px;
				width:62px;
				height:62px;
			}
			
			#char-sheet #shoulders {
				position:absolute;
				top:185px;
				left:515px;
				width:62px;
				height:84px;
			}			
			
			#char-sheet #torso {
				position:absolute;
				top:230px;
				left:588px;
				width:80px;
				height:113px;				
			}

			#char-sheet #neck {
				position:absolute;
				top:205px;
				left:681px;
				width:52px;
				height:52px;
			}

			#char-sheet #hands {
				position:absolute;
				top:284px;
				left:489px;
				width:62px;
				height:84px;
			}
			
			#char-sheet #bracers {
				position:absolute;
				top:161px;
				left:597px;
				width:62px;
				height:125px;
				background-color:red;
				opacity:.3;
			}			
			
			#char-sheet #legs {
				position:absolute;
				top:161px;
				left:597px;
				width:62px;
				height:125px;
			}			
			
			#char-sheet #waist {
				position:absolute;
				top:161px;
				left:597px;
				width:62px;
				height:125px;
			}			
			
			#char-sheet #rightFinger {
				position:absolute;
				top:161px;
				left:597px;
				width:62px;
				height:125px;
			}			
			
			#char-sheet #leftFinger {
				position:absolute;
				top:161px;
				left:597px;
				width:62px;
				height:125px;
			}			
			
			#char-sheet #feet {
				position:absolute;
				top:161px;
				left:597px;
				width:62px;
				height:125px;
			}			
			
			#char-sheet #mainHand {
				position:absolute;
				top:161px;
				left:597px;
				width:62px;
				height:125px;
			}

			#char-sheet #offHand {
				position:absolute;
				top:161px;
				left:597px;
				width:62px;
				height:125px;
			}
			
			#stats {
				clear:both;
				position:relative;
				top:325px;
				left:20px;
			}
			
			.tab {
				margin:0px;
				padding:0px;
				padding-left:15px;
				list-style-type:none;		
				height:27px;
				border-bottom:solid 2px black;
				width:400px;
			}
			
			.tab li.selected {
				background:black;
				color:white;
				float:left;
				padding:5px 10px;
				margin:0 2px;
			}
			
			.tab li {
				border:solid 2px black;
				background:white;
				color:black;
				float:left;
				padding:5px 10px;
				margin:0 2px;				
			}
			
			table {
				width:415px;
				border:solid 2px black;
				border-top:none;
			}
			
			table td:first-child {
				width:80px;
			}
			
			table td {
				padding:5px;
			}
			
			table tr:nth-child(odd) td:nth-child(odd), table tr:nth-child(even) td:nth-child(even) {
				background-color:rgba(0, 0, 0, 0.5);
			}
			
			table tr:nth-child(odd) td:nth-child(even), table tr:nth-child(even) td:nth-child(odd) {
				background-color:rgba(50, 50, 50, 0.5);
			}
		</style>
	</head>
	<body>		
		<div style="margin:0 auto;width:994px;background:url('images/bg.jpg');height:990px;">
			<div style="background:url('images/top-bg.jpg');height:215px;">
				<ul id="heroes">;
					Loading...
				</ul>
			</div>
			<div id="char-sheet1">
				<div id="head"></div>
				<div id="shoulders"></div>
				<div id="torso"></div>
				<div id="neck"></div>
				<div id="hands"></div>

				<div id="stats">
					<ul class="tab">
						<li class="selected">Stats</li>
						<li>Defense</li>
						<li>Others</li>
					</ul>
					<div style="clear:both;"></div>
					<table cellpadding="0" cellspacing="0">
						<tr>
							<td>Strength:</td>
							<td><span id="str"></span></td>
						</tr>
						<tr>
							<td>Dexterity:</td> 
							<td><span id="dex"></span></td>
						</tr>
						<tr>
							<td>Intelligence:</td>
							<td><span id="int"></span></td>
						</tr>
						<tr>
							<td>Vitality:</td>
							<td><span id="vit"></span></td>
						</tr>
						<tr>
							<td>Attack Speed:</td>
							<td><span id="aspd"></span>%</td>
						</tr>
						<tr>
							<td>Crit Chance:</td>
							<td><span id="crit"></span>%</td>
						</tr>
						<tr>
							<td>Crit Damage:</td>
							<td><span id="chd"></span>%</td>
						</tr>
						<tr>
							<td>Min Damage:</td>
							<td><span id="min"></span></td>
						</tr>
						<tr>
							<td>Max Damage:</td>
							<td><span id="max"></span></td>
						</tr>
						<tr>
							<td>Base ASPD:</td>
							<td><span id="baspd"></span></td>
						</tr>
						<tr>
							<td>DPS:</td>
							<td><span id="dps"></span></td>
						</tr>
					</table>
				</div>				
			</div>
		</div>
	</body>
</html>